<template>
  <div v-if="currentItem">
    <a-input-group>
      <a-select v-if="currentItem.keyItems" :style="{ width: (currentItem && currentItem.keyWidth ? currentItem.keyWidth : 140) + 'px' }" placeholder="请选择" v-model="selInfo.code" @change="selTitle">
        <a-option v-for="item of currentItem.keyItems" :key="item.value" :label="item.label" :value="item.value" />
      </a-select>
      <div v-else class="label-style">{{ currentItem.label }}</div>
      <a-input-search :style="{ width: (currentItem && currentItem.width ? currentItem.width : 160) + 'px' }" placeholder="请输入" v-model="selInfo.value" allow-clear @press-enter="search" @search="search" @clear="search">
        <template #suffix v-if="currentItem && currentItem.isMultiple ? currentItem.isMultiple : false">
          <a-popover position="br" trigger="click" v-model:popup-visible="showPopover" @click="selInfo.value ? (selInfo.mulValue = selInfo.value) : ''">
            <icon-more-vertical style="cursor: pointer; margin-left: 5px" />
            <template #content>
              <a-textarea placeholder="请输入，一行一个" v-model="selInfo.mulValue" :style="{ width: '200px', height: '200px' }" />
              <div class="footer">
                <div class="fl"> <a-button class="gray-outline" size="mini" @click="selInfo.mulValue = ''">清空</a-button> </div>
                <div class="fr">
                  <a-button size="mini" class="gray-outline" @click="showPopover = false">取消</a-button>
                  <a-button type="outline" size="mini" style="margin-left: 5px" @click="search">搜索</a-button>
                </div>
              </div>
            </template>
          </a-popover>
        </template>
      </a-input-search>
    </a-input-group>
  </div>
</template>

<script setup lang="ts">
  import { PropType, reactive, ref, onMounted, watch } from 'vue'
  import _ from 'lodash-es'
  onMounted(() => {
    setDefaultData()
  })
  const props = defineProps({
    currentItem: {
      type: Object as PropType<any>,
      default: () => {},
      require: true,
    },
  })
  const emit = defineEmits(['search'])

  let selInfo = reactive({}) as any
  let showPopover = ref(false)

  function setDefaultData() {
    let currentItem = props.currentItem || {}
    selInfo.code = currentItem.key || currentItem.keyItems?.[0]?.value
    selInfo.labelCode = selInfo.code
    selInfo.value = currentItem.value
    selTitle(currentItem.key, true)
  }
  function selTitle(e: any, isLoad?: boolean) {
    // 没有左边选项
    if (props.currentItem && !props.currentItem.keyItems) {
      selInfo.label = props.currentItem.label
      return
    }

    props.currentItem
      ? props.currentItem.keyItems?.forEach((el: any) => {
          if (e == el.value) {
            selInfo.key = el.value
            selInfo.label = el.label ? el.label : props.currentItem.label
            if (!isLoad) {
              selInfo.value = ref('')
              emit('search', selInfo)
            }
          }
        })
      : ''
  }
  function search() {
    if (selInfo.mulValue) selInfo.value = selInfo.mulValue.split('\n').join(',')
    selInfo.mulValue = ''
    emit('search', selInfo)
    showPopover.value = false
  }
  watch(
    () => props.currentItem,
    (val) => {
      if (val) setDefaultData()
    }
  )
  defineExpose({ search })
</script>

<style lang="less" scoped>
  .footer {
    // border-top: 1px solid #999;
    height: 30px;
    line-height: 30px;
  }

  .label-style {
    padding: 0 5px;
    height: 32px;
    line-height: 32px;
    border: 1px solid #dadde2;
    border-right: none;
  }
</style>
